<template>
  <div class="myItem">
    <p class="my">我的项目</p>
    <div class="item">
      <i>&#xe668;</i>
      <p>博客网站</p>
      <p>模仿别人的博客使用vue2做前端php做后端mysqli做数据库写成的小型博客</p>
    </div>
    <div class="item">
      <i>&#xe911;</i>
      <p>博客后台</p>
      <p>通过php更改数据资料动态的更改博客的展现数据</p>
    </div>
    <div class="item">
      <i>&#xe63d;</i>
      <p>购物平台</p>
      <p>跟随coderwhy老师编写的一个购物平台，实现商品展示加入购物车赛选商品等功能</p>
    </div>
  </div>
  
</template>
<script>
export default {
  name: "myItem",
  data() {
    return {};
  },
};
</script>
<style scoped>
.myItem{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.my{
  width: 100%;
  text-align: center;
  color: rgb(54, 54, 54);
  font-size: 29px;
  font-weight: 500;
  margin: 40px 0;
}
.item{
  flex: 1;

  box-sizing: border-box;
  margin: 0 22px;
}
.item i{
  display: block;
  width: 100px;
  height: 100px;
  margin:  0 auto;
  margin-bottom: 20px;
   text-align: center;
  line-height: 100px;
  border-radius: 50%;
  font-size: 40px;
  font-weight: 700;
  color:#fff;
}
.myItem .item:nth-of-type(1) i{
    background: skyblue;
}
.myItem .item:nth-of-type(2) i{
    background: pink;
}
.myItem .item:nth-of-type(3) i{
    background: rgb(59, 59, 59);
} 
.myItem .item p {
  width: 100%;
  text-align: center;
}
.myItem .item p:nth-of-type(1){
  font-size: 18px;
  font-weight: 600;
  margin-bottom:20px ;
  color: rgb(54, 54, 54);
}
.myItem .item p:nth-of-type(2){
  font-size: 14px;
  margin-bottom:20px ;
  color: rgb(83, 83, 83);
}
</style>